﻿@model MoneyCounter.Models.UpdateSettingsModel
@{
    ViewBag.Title = "Settings";
    Layout = "~/Views/Shared/UserPageTemplate.cshtml";
}

@section PageSpecificJavascript
{
    <script type="text/javascript" src="~/Scripts/MCP.Settings.js"></script>
}

<script>
    $(function () {
        MCP.Settings.Initialize();
        $(".save-changes-button").click(MCP.Settings.Save);
    });
</script>

<div class="page">
    <div class="page-header">
        <div class="page-header-content">
            <h2 class="fg-color-white tile-header-caption">Settings</h2>
            <div class="tile-header-toolbox">
                <a href="/UserMenu/UserMenu" class="icon-undo margin-right-large">Go back</a>
                <a class="save-changes-button" href="#"><i class="icon-database"></i>Save</a>
            </div>
        </div>
    </div>

    <div class="page-region content-marged-left">
        <div class="page-region-content fg-color-white">
            On this page You can edit your perosnal settings. For example, here You can say to us what is Your name or how big will be these month income. You can specify which items and checks consider as "Expensive purchases". And other.
        </div>
        <div class="page-region-content fg-color-white">
            <div class="grid settings-grid">
                <div class="row margin-bottom-large">
                    <div class="span6">
                        <div class="row first-name">
                            <div class="field-legend">First name</div>
                            <div class="input-control text span4 margin-right-large">
                                <input type="text" tabindex="1" autofocus="autofocus" value="@Model.Settings.FirstName"/>
                                <button class="helper"></button>
                            </div>
                        </div>
                    </div>
                    <div class="span6">
                        <div class="row last-name">
                            <div class="field-legend">Last name</div>
                            <div class="input-control text span4 margin-right-large">
                                <input type="text" tabindex="2" value="@Model.Settings.LastName"/>
                                <button class="helper"></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row margin-bottom-large">
                    <div class="span6">
                        <div class="row month-income">
                            <div class="field-legend">Month income</div>
                            <div class="input-control text span4 margin-right-large">
                                <input type="number" tabindex="3" step="any" min="0" value="@Model.Settings.MonthIncome"/>
                                <button class="helper"></button>
                            </div>
                        </div>
                    </div>
                    <div class="span6">
                        <div class="row min-balance">
                            <div class="field-legend">Minimal balance</div>
                            <div class="input-control text span4 margin-right-large">
                                <input type="number" tabindex="4" step="any" min="0" value="@Model.Settings.MinBalance"/>
                                <button class="helper"></button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row centered">
                    <button class="mini save-changes-button"><i class="icon-database"></i>Save</button>
                </div>
            </div>
        </div>
    </div>

    <div class="clear"></div>
</div>
